<template>
    <div class="comment-wrap">
        <p class="comment-title">评论</p>
        <div class="mui-input-row">
            <textarea id="textarea" rows="3" placeholder="发表你的评论..." v-model="msg"></textarea>
        </div>
        <button type="button" class="mui-btn mui-btn-primary submitBtn" @click="postComment">提交</button>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="(item,index) in comments" :key="index">
                <img class="mui-media-object mui-pull-left" src="../../images/shuijiao.jpg">
                <div class="mui-media-body">
                    柯南
                    <p class="comment-time">
                        <span class="comment-time">{{item.add_time|DateFormat}}</span>
                        <span class="comment-floor">{{index+1}}楼</span>
                    </p>
                    <p class="comment-content">{{item.content}}</p>
                </div>
            </li>
        </ul>
        <button type="button" class="mui-btn mui-btn-primary submitBtn mui-btn-outlined" @click="addPageIndex">加载更多
        </button>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'

    export default {
        props: ['getcommetId'],
        data: function () {
            return {
                comments: [],
                pageIndex: 1, //默认加载评论第一页
                msg: '' //发表评论暂存
            }
        },
        methods: {
            getComments() { //获取评论列表
                this.$http.get(`http://www.liulongbin.top:3005/api/getcomments/${this.getcommetId}?pageindex=${this.pageIndex}`).then(data => {
                    this.comments = this.comments.concat(data.body.message);
                })
            },
            addPageIndex() { //加载更多
                this.pageIndex += 1;
                this.getComments();
            },
            postComment() { //发表评论
                if (this.msg === '') {
                    Toast('请输入发表内容');
                } else {
                    this.$http.post(`http://www.liulongbin.top:3005/api/postcomment/${this.getcommetId}`, {content: this.msg}, {emulateJSON: true}).then(data => {
                        if (data.body.status === 0) {
                            Toast('发表成功');
                            this.comments.unshift({add_time: new Date(), content: this.msg, user_name: '匿名用户'});
                            this.msg=''
                        }
                    });
                }
            }
        },
        created() {
            this.getComments();
        }
    }
</script>

<style scoped lang="less">
    .comment-wrap {
        width: 100%;
        padding: 10px;

        .comment-title {
            padding: 6px;
            color: #8a6de9;
        }

        .mui-input-row textarea {
            margin: 0;
        }

        .submitBtn {
            width: 100%;
        }

        img {
            border-radius: 50%;
        }

        .comment-content {
            word-break: break-all;
            color: #333;
            font-weight: bold;
        }

        .comment-time {
            display: flex;
            justify-content: space-between;
        }
    }
</style>
